import {FC, useEffect, useState} from 'react';
import './index.scss'
import {Form, Input, Select} from "antd";

import {BaseInfoInterface, BaseInfoProps} from '../../../types/interface/common.interface';
import TextArea from "antd/es/input/TextArea";


const BaseInfoComponent: FC<BaseInfoProps> = ({value, onChange}) => {
    // TODO 表单基本数据数据类型
    const [form_base_info] = Form.useForm<BaseInfoInterface>()
    // TODO 分组数据
    const [group_select_options, set_group_select_options] = useState([
        {value: '1', label: '分组一'},
        {value: '2', label: '分组二'},
        {value: '3', label: '分组三'},
        {value: '4', label: '分组四'},
    ])
    // TODO 发起人数据
    const [publisher_select_options, set_publisher_select_options] = useState([
        {value: '1', label: '张三'},
        {value: '2', label: '李四'},
        {value: '3', label: '王五'},
    ])


    useEffect(() => {
        form_base_info.setFieldsValue(value);
    }, [value, form_base_info]);

    const handleValuesChange = () => {
        onChange(form_base_info.getFieldsValue());
    };
    return (
        <Form className='base-info' layout="vertical" name='base-info-form'
              form={form_base_info} onValuesChange={handleValuesChange}
              initialValues={value}>
            <Form.Item label="表单名称" name="name"
                       rules={[{required: true, message: '表单名称不能为空!'}]}>
                <Input placeholder="请输入" showCount maxLength={50}/>
            </Form.Item>
            <Form.Item label="表单分组" name="group"
                       rules={[{required: true, message: '表单分组!'}]}>
                <Select placeholder="请选择" options={group_select_options}/>
            </Form.Item>
            <Form.Item label="表单说明" name="remark"
                       rules={[{required: true, message: '表单说明!'}]}>
                <TextArea showCount maxLength={100} placeholder="请输入"/>
            </Form.Item>
            <Form.Item label="指定发起人" name="publisher"
                       rules={[{required: true, message: '指定发起人!'}]}>
                <Select placeholder="请选择"
                        options={publisher_select_options}
                        mode="tags"/>
            </Form.Item>
            <Form.Item label="指定管理员" name="administrators"
                       rules={[{required: true, message: '指定管理员!'}]}>
                <Select placeholder="请选择"
                        options={publisher_select_options}
                        mode="tags"/>
            </Form.Item>
        </Form>
    )
}

export default BaseInfoComponent;